<template>
  <Spin wrapperClassName="h-full w-full" :spinning="spinning">
    <div class="content" ref="chartRef">暂无数据</div>
  </Spin>
</template>
<route lang="json">
{
  "name": "trend-chart",
  "meta": {
    "title": "结构物健康评估",
    "requireAuth": false,
    "layout": false
  }
}
</route>
<script setup lang="tsx">
import { ref } from 'vue';
import { Spin } from 'ant-design-vue';
import * as eCharts from 'echarts';
import 'echarts/theme/macarons';
import { getTrendChartData } from '../api';

const props = defineProps({
  state: {
    type: Object,
    default: () => {},
  },
});
const { state } = props;

// 初始化渲染
const chartRef = ref();
const spinning = ref(false);

const queryParams = ref<any>({
  stationId: '',
  startTime: '',
  endTime: '',
});
const init = async (dateRange) => {
  queryParams.value.stationId = state.stationId;
  queryParams.value.startTime = dateRange[0];
  queryParams.value.endTime = dateRange[1];
  let chartData: any = {};
  try {
    spinning.value = true;
    const res: any = await getTrendChartData(queryParams.value);
    chartData = res.data;
    spinning.value = false;
    if (!Object.keys(chartData).length) return;
  } catch (error) {
    spinning.value = false;
  }

  const accelerationDataEIE = format(chartData.aEie);
  const accelerationDataEIN = format(chartData.aEin);
  const accelerationDataEIZ = format(chartData.aEiz);
  const speedDataEIE = format(chartData.sEie);
  const speedDataEIN = format(chartData.sEin);
  const speedDataEIZ = format(chartData.sEiz);
  const displacemenDataEIE = format(chartData.dEie);
  const displacemenDataEIN = format(chartData.dEin);
  const displacemenDataEIZ = format(chartData.dEiz);

  const _xAxis = [];
  const _yAxis = [];
  const _series = [];
  const _data = [
    accelerationDataEIE,
    accelerationDataEIN,
    accelerationDataEIZ,
    speedDataEIE,
    speedDataEIN,
    speedDataEIZ,
    displacemenDataEIE,
    displacemenDataEIN,
    displacemenDataEIZ,
  ];
  _data?.forEach((item, index) => {
    _xAxis.push({
      gridIndex: index,
      type: 'time',
      name: '',
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
        },
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: 'rgba(255,255,255,0.3)',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        color: '#fff',
        fontSize: '10px',
        rotate: 30, // 设置倾斜角度，值可以根据需要调整
      },
    });
    _yAxis.push({
      gridIndex: index,
      type: 'value',
      name: '',
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
        },
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: 'rgba(255,255,255,0.3)',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        color: '#fff',
        fontSize: '12px',
      },
    });
    _series.push({
      gridIndex: index,
      data: item,
      type: 'scatter',
      xAxisIndex: index,
      yAxisIndex: index,
    });
  });

  const options = {
    title: [
      {
        x: '7%',
        y: '2%',
        text: 'EIE-加速度(cm/s/s)',
        textStyle: {
          color: '#FFF',
        },
      },
      {
        x: '39%',
        y: '2%',
        text: 'EIN-加速度(cm/s/s)',
        textStyle: {
          color: '#FFF',
        },
      },
      {
        x2: '17%',
        y: '2%',
        text: 'EIZ-加速度(cm/s/s) ',
        textStyle: {
          color: '#FFF',
        },
      },
      {
        x: '7%',
        y2: '60%',
        text: 'EIE-仿真速度(cm/s)',
        textStyle: {
          color: '#FFF',
        },
      },
      {
        x: '39%',
        y2: '60%',
        text: 'EIN-仿真速度(cm/s)',
        textStyle: {
          color: '#FFF',
        },
      },
      {
        x2: '17%',
        y2: '60%',
        text: 'EIZ-仿真速度(cm/s)',
        textStyle: {
          color: '#FFF',
        },
      },
      {
        x: '7%',
        y2: '28%',
        text: 'EIE-仿真位移(cm)',
        textStyle: {
          color: '#FFF',
        },
      },
      {
        x: '39%',
        y2: '28%',
        text: 'EIN-仿真位移(cm)',
        textStyle: {
          color: '#FFF',
        },
      },
      {
        x2: '18%',
        y2: '28%',
        text: 'EIZ-仿真位移(cm)',
        textStyle: {
          color: '#FFF',
        },
      },
    ],
    grid: [
      { x: '7%', y: '7%', width: '20%', height: '20%' },
      { x: '39%', y: '7%', width: '20%', height: '20%' },
      { x2: '7%', y: '7%', width: '20%', height: '20%' },
      { x: '7%', y2: '39%', width: '20%', height: '20%' },
      { x: '39%', y2: '39%', width: '20%', height: '20%' },
      { x2: '7%', y2: '39%', width: '20%', height: '20%' },
      { x: '7%', y2: '7%', width: '20%', height: '20%' },
      { x: '39%', y2: '7%', width: '20%', height: '20%' },
      { x2: '7%', y2: '7%', width: '20%', height: '20%' },
    ],
    xAxis: _xAxis,
    yAxis: _yAxis,
    tooltip: {
      position: 'top',
    },
    series: _series,
  };
  const chart = eCharts.init(chartRef.value);
  chart.setOption(options);
  addEventListener('resize', function () {
    chart.resize();
  });
};

// 获取速度数据
const format = (data) => {
  const _arr =
    data?.reduce((prev, item) => {
      if (item.ts % 1000 === 0) {
        prev.push({
          name: new Date(item.ts).toLocaleString(),
          value: [item.ts, item.maxValue],
          symbol: 'circle',
          symbolSize: 5,
          itemStyle: {
            color: item.flag ? 'red' : 'green',
          },
        });
      }
      return prev;
    }, []) || [];
  return _arr;
};

defineExpose({
  init,
});
</script>

<style lang="scss" scoped>
/* 右侧echarts数据展示 */
.content {
  padding: 20px 0;
  height: 100%;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  overflow: auto;
  overflow-x: hidden;
}
.ant-spin-container {
  height: 100%;
  width: 100%;
}
</style>
